<!DOCTYPE HTML>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta th:include="front/fragments :: head(~{::title})">
    <link rel="stylesheet" type="text/css" href="/static/front/css/jqcloud.css"/>
    <style type="text/css">
        #tag-wordcloud {
            width: 100%;
            height: 250px;
        }
    </style>
    <script type="text/javascript" src="/static/front/js/jqcloud-1.0.4.min.js"></script>
    <!--打字机效果-->
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
    <script>
        $(function () {
            var typed = new Typed("#subtitle", {
                strings: ['能够通过人传授的智慧来躲避的困难实在少之又少。真正要掌握的，并不是有关某个问题的知识，而是寻找那个问题的方法。那样的东西可不是一朝一夕能掌握过来的。'],
                startDelay: 300,
                typeSpeed: 100,
                loop: true,
                backSpeed: 50,
                showCursor: true
            });
        });
    </script>
</head>

<body>
<!--header-->
<header th:replace="front/fragments :: header"></header>
<!--end header-->

<!--bgcover-->
<div th:replace="front/fragments :: bgcover"></div>
<!--end bgcover-->

<div id="app">
    <!--content-->
    <main class="content" id="articleCards">
        <!--标签云-->
        <div id="tags" class="container chip-container">
            <div class="card">
                <div class="card-content">
                    <div class="tag-title center-align">
                        <i class="fas fa-tags"></i>&nbsp;&nbsp;文章标签
                    </div>
                    <!--标签列表-->
                    <div class="tag-chips">
                        <a href="javascript:;" v-for="(tag,index) in tags" :key="tag.id"
                           @click="getArticlesByTagId(tag.id, 1)">
                    <span class="chip center-align waves-effect waves-light
                             chip-default" :style="{backgroundColor : tag.color}"
                          :class="{'chip-active' : tag.id == tagId}">{{tag.name}}
                        <span class="tag-length">{{tag.articleCount}}</span>
                    </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!--动态标签云-->
        <div id="tag-cloud" class="container" data-aos="fade-up" v-if="articles.length===0">
            <div class="card">
                <div class="card-content">
                    <div class="my-tag-title center-align" style=" font-size: 1.75rem;">
                        <i class="fas fa-cloud"></i>&nbsp;&nbsp;文章标签云
                    </div>
                </div>
                <div id="tag-wordcloud" class="card-content jqcloud"></div>
            </div>

        </div>
        <!-- 所有文章卡片 -->
        <article class="container articles">
            <div class="row article-row">
                <div v-for="(article, index) in articles" :key="article.id">
                    <div class="article col s12 m6 l4" data-aos="zoom-in">
                        <div class="card articleCard">
                            <!--卡片上部-->
                            <a :href="'/article/'+article.id" target="_blank">
                                <div class="card-image">
                                    <!--文章图片-->
                                    <img class="responsive-img lazy" src="https://cdn.jsdelivr.net/gh/geek-cy/img/blog/miku.jpg"
                                         :data-src="article.cover">
                                    <!--文章标题-->
                                    <span class="card-title">{{article.title}}</span>
                                </div>
                            </a>
                            <!--卡片下部-->
                            <div class="card-content article-content">
                                <!--文章描述-->
                                <div class="summary block-with-text">{{article.summary}}</div>
                                <!--文章信息-->
                                <div class="publish-info">
                                    <!--发布日期-->
                                    <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>{{article.createTime | dateFormat}}
                                </span>
                                    <!--文章分类-->
                                    <span class="publish-author">
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                <a class="post-category" :href="'/page/categories?id='+article.category.id">{{article.category.name}}</a>
                            </span>
                                </div>
                            </div>
                            <!--文章标签-->
                            <div class="card-action article-tags">
                                <a :href="'/page/tags?id='+tag.id" v-for="(tag, index) in article.tagList">
                                    <span class="chip bg-color">{{tag.name}}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </article>
        <!--pagination-->
        <div class="container paging" v-if="articles.length!==0">
            <div class="row">
                <!--左边按钮-->
                <div class="col s4 m4 l4">
                    <a class="left btn-floating btn-large waves-effect waves-light" @click="toPage(current-1)"
                       href="#articleCards"
                       :class="{disabled: current == 1}">
                        <i class="fas fa-angle-left"></i>
                    </a>
                </div>
                <!--分页信息-->
                <div class="page-info col s4 m4 l4">
                    <div class="center-align b-text-gray">{{current}} / {{pages}}</div>
                </div>
                <!--右边按钮-->
                <div class="col s4 m4 l4">
                    <a class="right btn-floating btn-large waves-effect waves-light"
                       @click="toPage(current+1)" href="#articleCards" :class="{disabled: current == pages}">
                        <i class="fas fa-angle-right"></i>
                    </a>
                </div>
            </div>
        </div>
        <!--end pagination-->
    </main>
    <!--end content-->
</div>

<!--footer-->
<footer th:replace="front/fragments :: footer"></footer>
<!--end footer-->

<!--commons-->
<div th:replace="front/fragments :: commons"></div>
<!--end commons-->

<!--Vue-->
<script type="text/javascript">
    let app = new Vue({
        el: '#app',
        data: {
            tags: [],
            colors: ['#D5F5E3', '#E8F8F5', '#82E0AA', '#A3E4D7', '#FEF9E7', '#F9E79F', '#F8C471', '#F9EBEA'],
            articles: [],
            current: 1,
            pages: 1,
            tagId: null,
        },
        methods: {
            getTags: function () {
                axios({
                    url: '/tags',
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                }).then((result) => {
                    this.tags = result.data;
                    this.getWordArray();
                })
            },
            getArticlesByTagId: function (tagId, current) {
                axios({
                    url: '/tag/' + tagId + '/articles?current=' + current,
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                }).then((result) => {
                    this.articles = result.data.records;
                    this.current = result.data.current;
                    this.pages = result.data.pages;
                    this.tagId = tagId;
                    this.$nextTick(function () {
                        lazyLoadInstance.update();
                    });
                })
            },
            toPage: function (page) {
                if (page >= 1 && page <= this.pages) {
                    this.current = page;
                    this.getArticlesByTagId(this.tagId, page);
                    $(window).scrollTo('#articleCards', 1000);
                }
            },
            getWordArray: function () {
                let wordArray = [];
                $.each(this.tags, function (index, tag) {
                    let word = {};
                    word.text = tag.name;
                    word.weight = tag.articleCount;
                    word.link = 'javascript:;';
                    wordArray.push(word);
                });
                $("#tag-wordcloud").jQCloud(wordArray, {autoResize: true});
            },
            getQueryString: function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg);  //匹配目标参数
                if (r != null) return decodeURI(r[2]);
                return null;
            }
        },
        created: function () {
            this.getTags();
            let tid = this.getQueryString('id');
            if (tid !== null) {
                this.tagId = tid;
                this.getArticlesByTagId(this.tagId, 1);
            }
        },
        filters: {
            dateFormat: function (value) {
                return moment(value).format("YYYY-MM-DD");
            }
        },
    });
</script>

<!--scripts-->
<div th:replace="front/fragments :: scripts"></div>
<!--end scripts-->
</body>

</html>
